<div class="contact-panel" ng-controller="contactController" ng-switch on="onPanel">
    <div ng-switch-when="contact">
        <div class="contact-panel_header">
            通讯录
        </div>
        <div class="contact-panel_body">
            <ul class="contact-panel_menu">
                <li class="contact-panel_cell">
                    <a href="" data-toggle="modal" data-target="#createGroupModal" ng-click="getAllMembers()">
                        <div class="contact-panel_avatar">
                            <img src="" alt="" class="contact-panel_avatar--img">
                        </div >
                        <div class="contact-panel_celltext" >
                            创建群组
                        </div>
                    </a>
                </li>
                <li class="contact-panel_cell">
                    <a href="javascript:;" ng-click="selectPanel('group')">
                        <div class="contact-panel_avatar">
                            <img src="" alt="" class="contact-panel_avatar--img">
                        </div>
                        <div class="contact-panel_celltext" >
                            我参与的群组
                        </div>
                    </a>
                </li>
                <li class="contact-panel_cells" ng-repeat="contact in contactlist" ng-init="outerIndex = $index">
                    <div class="contact-panel_cell cell-title">
                        {{contact.depname}}
                    </div>
                    <ul class="contact-menu">
                        <li class="contact-panel_cell" ng-repeat="dep in contact.deps" ng-init="innerIndex = $index" >

                            <a class="contact-menu_title"  href="javascript:;" ng-click="showList(outerIndex, innerIndex)">
                              <span class="glyphicon glyphicon-chevron-up" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[contactGroup[outerIndex + '_' + innerIndex]]"></span>
                              {{dep.depname}}
                            </a>
                            <ul class="contact-menu" ng-show="contactGroup[outerIndex + '_' + innerIndex]">
                                <li class="contact-cell" ng-repeat="user in dep.users">
                                    <a href="javascript:;" ng-click="selectContact(user.userid)">
                                        <div class="contact-cell_avatar">
                                            <img ng-src={{user.portrait_uri}} alt="" class="contact-cell_avatar--img" />
                                        </div>
                                        <div class="contact-cell_celltext">
                                            {{user.username}}
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div ng-switch-when="group">
        <div class="contact-panel_header">
            <span>我参加的群组</span>
        </div>
        <div class="contact-panel_body">
            <ul class="contact-panel_menu">
                <li class="contact-panel_cell">
                    <a href="javascript:;" ng-click="selectPanel('contact')">
                        <div class="contact-panel_celltext">
                            返回
                        </div>
                    </a>
                </li>
                <li class="contact-panel_cells">
                    <ul class="contact-menu">
                    <li class="contact-cell" ng-repeat="group in grouplist">
                        <a href="javascript:;"  ng-click="selectGroup(group.groupid)">
                            <div class="contact-cell_celltext">
                                {{group.groupname}}
                            </div>
                        </a>
                    </li>
                </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="modal fade" id="createGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">创建群组</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="groupName" class="col-sm-2 control-label">群名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="groupName" placeholder="群名称" ng-model="groupName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="groupIntro" class="col-sm-2 control-label">群简介</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" id="groupIntro"  placeholder="群简介" ng-model="groupIntro"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">添加成员</label>
                            <div class="col-sm-10" style="height: 200px; overflow: auto">
                              <div class="checkbox"  ng-repeat="member in allMembers track by $index" >
                                <label>
                                  <input type="checkbox" name={{member.userid}} ng-model="member['checked']" ng-checked="member.userid == userId" ng-disabled="member.userid == userId" id="member-{{$index + 1}}">
                                    {{member.username}}
                                </label>
                              </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" ng-click="createGroup(groupName, groupIntro)" data-loading-text="保存中...">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
